<template>
  <div class="app">
    <div class="right">
      <Collapse></Collapse>
    </div>
    <div class="left">
      <div class="block">
        <div class="box">
          <el-table :data="arr" stripe border style="width: 100%">
            <el-table-column label="商品名称" width="600">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{
                  scope.row.goods_name
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="80">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{
                  scope.row.goods_price
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量" width="80">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{
                  scope.row.goods_weight
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{ scope.row.upd_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 下面的分页 -->
        <div class="bottom">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Collapse from "../../components/Collapse.vue";
export default {
  components: {
    Collapse,
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      query: "1",
      pagenum: 1,
      pagesize: 10,
      arr: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      let a = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      };
      this.$http.getshangpin(a).then((res) => {
        console.log(res);
        this.arr = res.data.data.goods;
        // console.log(this.arr);
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      console.log(this.pagenum);
      let a = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      };
      this.$http.getshangpin(a).then((res) => {
        console.log(res);
        this.arr = res.data.data.goods;
        // console.log(this.arr);
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },

  created() {
    let a = {
      query: this.query,
      pagenum: this.pagenum,
      pagesize: this.pagesize,
    };
    this.$http.getshangpin(a).then((res) => {
      console.log(res);
      this.arr = res.data.data.goods;
      // console.log(this.arr);
    });
  },
};
</script>
<style lang="scss" scoped>
.right {
  height: 1000px;
  width: 300px;
  float: left;
}
.left {
  float: left;
}
</style>